<nav class="nav-bar" [ngClass]="{'collapsed': !openMenu}">
    <div class="menu bar">
        <!--(mouseenter)="onOpenMenu()" (mouseleave)="onCloseMenu()"-->
        <!--三条线  -->
        <div title="{{openMenu?'折叠':'展开'}}" class="menu-item" (mouseenter)="onOpenMenu()" (mouseleave)="onCloseMenu()">
            <!--(click)="onOpenMenu()"-->
            <a class="menu-link link">
                <!--[style.padding-left.px]="openMenu ? 78 : 20"-->
                <i class="material-icons">dehaze</i>
            </a>
        </div>
        <!--默认显示的导航项  -->
        <div class="default" (mouseenter)="onOpenMenu()" (mouseleave)="onCloseMenu()">
            <ul class="menu-default scrollbar">
                <li class="menu-item" *ngFor="let shortcut of shortcuts" [ngClass]="{'__selected': selectedShortcut === shortcut}" (click)="onShortcutSelectedChange(shortcut)"
                    (mouseenter)="enterMenu($event,shortcut)" (mouseleave)="leaveMenu()">
                    <a class="menu-link" [style.padding-left.px]="openMenu ? 25 : 20">
                        <span class="menuItem-ico material-icons">{{shortcut.menuIcon}}</span>
                        <span class="menuItem-name" *ngIf="openMenu">{{shortcut.menuName}}</span>
                    </a>
                    <!-- <div class="prompt">
                        <div class="title">
                            {{shortcut.menuName}}
                        </div>
                        <span></span>
                        <div class="clear"></div>
                    </div> -->
                </li>
            </ul>
        </div>

        <!--分割线  -->
        <div class="division" (mouseenter)="onOpenMenu()" (mouseleave)="onCloseMenu()"></div>
        <!--自定义的导航项  -->
        <div class="custom" (mouseenter)="onOpenMenu()" (mouseleave)="onCloseMenu()">
            <ul class="menu-custom scrollbar">
                <li class="menu-item" pDraggable="dFavorite" pDroppable="dFavorite" *ngFor="let favorite of favorites" [ngClass]="{'__selected': selectedFavorite === favorite}"
                    (mouseenter)="enterMenu($event,favorite)" (mouseleave)="leaveMenu()" (click)="onFavoriteSelectedChange(favorite)"
                    (onDrop)="onDrop($event,favorite)" (onDragStart)="onDragStart($event,favorite)" (onDragEnd)="onDragEnd($event)">
                    <a class="menu-link" [style.padding-left.px]="openMenu ? 25 : 20">
                        <span class="menuItem-ico material-icons">{{favorite.menuIcon}}</span>
                        <span class="menuItem-name" *ngIf="openMenu">{{favorite.menuName}}</span>
                    </a>
                    <!-- <div class="prompt">
                        <div class="title">
                            {{favorite.menuName}}
                        </div>
                        <span></span>
                        <div class="clear"></div>
                    </div> -->
                </li>
            </ul>
        </div>

        <!--箭头  -->
        <div class="arrow" (click)="onOpenAllMenu()">
            <span></span>
        </div>
        <div class="prompt" *ngIf="showPrompt" [ngStyle]="{'top.px':top}">
            <div class="title">
                {{title}}
            </div>
            <span></span>
            <div class="clear"></div>
        </div>
    </div>
    <!-- 弹出层 -->
    <div class="dropdown" [ngClass]="{'__opened': openAllMenu}" [ngStyle]="{'left.px':openMenu ? 80:-26}">
        <a class="dropdown-close" (click)="onOpenAllMenu()">×</a>
        <div class="dropdown-head">
            <!--搜索框  -->
            <div class="form-group" [formGroup]="menuSearchForm">
                <div class="form-input __search">
                    <input placeholder="请输入关键字" formControlName="menuName" name="menuName" tabindex="1">
                    <button class="btn __other">
                           <i class="material-icons">search</i>
                    </button>
                </div>
            </div>
        </div>
        <!--弹出层内容  -->
        <div class="dropdown-content" *ngIf="!isSearching">
            <div class="list __items" *ngFor="let menu of accesies">
                <div class="list-group" [ngClass]="{'__opened': menu.isShow}" (click)="onOpenCurrentMenuItem(menu)">{{menu.menuName}}</div>
                <ul class="__sub" *ngIf="menu.isShow">
                    <li title="{{menuItem.menuName}}" class="list-item" *ngFor="let menuItem of menu.children" (click)="onAccessSelectedChange(menuItem)">
                        <app-star [menu]="menuItem" (checked)="onFavoriteChecked($event)"></app-star>
                        <!--图标  -->
                        <a class="list-link">
                            <i class="material-icons">{{menuItem.menuIcon}}</i>
                            <span class="list-name">{{menuItem.menuName}}</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="dropdown-content" *ngIf="isSearching">
            <div class="list __items">
                <ul class="__sub">
                    <li title="{{menuItem.menuName}}" class="list-item" *ngFor="let menuItem of filerMenus" (click)="onAccessSelectedChange(menuItem)">
                        <app-star [menu]="menuItem" (checked)="onFavoriteChecked($event)"></app-star>
                        <!--图标  -->
                        <a class="list-link">
                                <i class="material-icons">{{menuItem.menuIcon}}</i>
                                <span class="list-name">{{menuItem.menuName}}</span>
                    </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</nav>
